<template >
  <div>
    <div id="container">

      <swiper :options="swiperOption" ref="mySwiper">

        <swiper-slide class="swiper-slide games">
          <router-link to="/lunboinfo">
            <img class="swi-img" src="../../../static/daohangtiao/tj-4.png" alt="">
          </router-link>
        </swiper-slide>
        <swiper-slide class="swiper-slide games">
          <router-link to="/lunboinfo">
            <img class="swi-img" src="../../../static/daohangtiao/tj-4.png" alt="">
          </router-link>
        </swiper-slide>
        <swiper-slide class="swiper-slide games">
          <router-link to="/lunboinfo">
            <img class="swi-img" src="../../../static/daohangtiao/tj-4.png" alt="">
          </router-link>
        </swiper-slide>
        <swiper-slide class="swiper-slide games">
          <router-link to="/lunboinfo">
            <img class="swi-img" src="../../../static/daohangtiao/tj-4.png" alt="">
          </router-link>
        </swiper-slide>




        <p class="swiper-pagination" slot="pagination"></p>



      </swiper>

    </div>


    <div class="con-goods">
      <div class="newgoods-tit">
        <img src="../../../static/daohangtiao/dht-10.png" />
        <span>新品上市 促销大庆</span>
      </div>
      <div class="newgoods-wrap">
        <router-link to="/xianshi">
          <div class="newgoods-left">
            <img src="../../../static/daohangtiao/tj-14.png" />
            <p>限时断货</p>
          </div>
        </router-link>

        <div class="newgoods-right">
          <router-link to="/jingxuan">
            <div class="newgoods-r-t">
              <span>品牌精选</span>
              <img src="../../../static/daohangtiao/tj.png"/>
            </div>
          </router-link>
          <router-link to="/remai">
          <div class="newgoods-r-b">
            <span>限时热卖</span>
            <img src="../../../static/daohangtiao/tj-12.png"/>
          </div>
          </router-link>
        </div>
      </div>
    </div>


    <div v-for="item1 in imgs" class="d-wrap">
      <div class="d-title">
        <img :src="item1.url1" alt="">
        <span>{{item1.tit}}</span>
      </div>
      <router-link to="/yanzhuang">
        <div class="d-img">
          <img :src="item1.url2" alt="">
        </div>
      </router-link>
      <div class="d-bottom">
        <div v-for="item2 in arr" class="bot-img">
          <img :src="item2.url3" alt="">
          <span class="dbspan1">{{item2.title}}</span>
          <span class="dbspan2">{{item2.price}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Tuijian",
      data(){
          return{
            imgs:[
              {url1:require('../../../static/daohangtiao/dht-11.png'),tit:'今日推荐',url2:require('../../../static/daohangtiao/tj-3.png')},
              {url1:require('../../../static/daohangtiao/dht-11.png'),tit:'今日热销',url2:require('../../../static/daohangtiao/tj-3.png')}
            ],
            arr:[
              {url3:require('../../../static/daohangtiao/tj-16.png'),title:'不易脱妆口红',price:'$59'},
              {url3:require('../../../static/daohangtiao/tj-15.png'),title:'花蕊唇彩',price:'$129'},
              {url3:require('../../../static/daohangtiao/tj-8.png'),title:'娇吻玉口红',price:'$88'}
            ],
            swiperOption: {

              autoplay : {

                disableOnInteraction: false, //用户操作后是否禁止自动循环

                delay: 3000 //自自动循环时间

              }, //可选选项，自动滑动

              speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）

              loop:true, //循环切换

              grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状

              // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。

              autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

              scrollbar: '.swiper-scrollbar',

              mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动

              observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper

              pagination: {

                el: '.swiper-pagination',

                // type : 'progressbar', //分页器形状

                clickable :true, //点击分页器的指示点分页器会控制Swiper切换

              },



            },

            computed: {

              swiper() {

                return this.$refs.mySwiper.swiper

              }

            }
          }
      }
    }
</script>

<style scoped>
  #container{
    margin-bottom: 2rem;
  }
  #container .swiper-slide .swi-img{
    width: 100%;
    height: auto;
  }

  .con-bar span{
    color: #333333;
    font-size: 3rem;
    line-height: 6rem;
  }
  .con-goods{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 2rem;
  }
  .newgoods-wrap{
    width: 72rem;
    height: 28rem;
    padding: 1rem 0;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
  }
  .newgoods-tit{
    width: 68rem;
    height: 6rem;
    padding: 0 2rem;
    line-height: 6rem;
    border-bottom: 1px solid #cccccc;
  }
  .newgoods-tit span{
    font-size: 3rem;
    margin-left: 1rem;
  }


  .newgoods-left{
    position: relative;
    width: 31rem;
    height: 28rem;
    border-right: 1px solid #cccccc;
  }
  .newgoods-left p{
    position: absolute;
    top: .5rem;
    left: 1rem;
    padding: .5rem;
    font-size: 2.4rem;
    background: #e53e42;
    color: #fff;
  }
  .newgoods-left img{
    margin-top: 6rem;
    margin-left: 2rem;
    height: 22rem;
  }
  .newgoods-right{
    width: 39.5rem;
    height: 28rem;
    padding: 0 0.5rem;
    /*background: blue;*/
  }
  .newgoods-r-t{
    position: relative;
    width: 39rem;
    height: 13.5rem;
    border-bottom: 1px solid #cccccc;

  }
  .newgoods-r-t span{
    position: absolute;
    left: 8rem;
    top:0;
    width: 1rem;
    height: 12rem;
    font-size: 2.4rem;
    color: #f15779;
  }
  .newgoods-r-t img{
    height: 100%;
    margin-left: 14rem;
  }
  .newgoods-r-t{
    width: 100%;
    height: 14rem;
  }
  .newgoods-r-b{
    position: relative;
    width: 38rem;
    height: 13.5rem;
  }
  .newgoods-r-b img{
    height: 100%;
    width: 16rem;
    margin-left: 14rem;
  }
  .newgoods-r-b span{
    position: absolute;
    left: 8rem;
    bottom: 0;
    width: 1rem;
    height: 12rem;
    font-size: 2.4rem;
    color: #f15779;
  }



  .d-wrap{
    margin-bottom: 2rem;
    background: #fff;
  }
  .d-title{
    width: 68rem;
    height: 6rem;
    padding: 0 2rem;
    line-height: 6rem;
    border-bottom: 1px solid #cccccc;
  }
  .d-title img{
    width: 3rem;
    height: 3rem;
  }
  .d-title span{
    font-size: 3rem;
    color: #4d4d4d;
    margin-left: 1rem;
  }
  .d-img{
    width: 100%;
    height: 30rem;
  }
  .d-img img{
    width: 100%;
    height: 100%;
  }
  .d-bottom{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    padding: 2rem 0;
  }
  .bot-img{
    width: 72rem;
    border-right: 1px solid #cccccc;
    text-align: center;
  }
  .bot-img div{
    width: 24rem;
  }
  .bot-img:last-child{
    border-right:none;
  }
  .d-bottom span{
    display: block;
  }
  .d-bottom .dbspan1{
    color: #000;
    font-size: 2.4rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
  .d-bottom .dbspan2{
    color: #e83d41;
    font-size: 2.4rem;
  }
</style>
